<template>
<!-- 个人资料 -->
  <div>
    <b>上传头像</b>
    <div class="img-upload">
      <div class="add">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button class="addImg" size="small">上传头像</el-button>
      </div>
      <div class="tip">
        <p>图片格式：gif jpg png</p>
        <p>最适尺寸：200*200px</p>
      </div>
    </div>
    <b class="two">修改个人资料</b>
    <div class="info-box">
      <div class="info">
        <span class="info-title">登录账号：</span>
        <span class="info-text">{{ userInfo.userName }}</span>
      </div>
      <div class="info">
        <span class="info-title">手机号：</span>
        <span v-if="!phoneEdit" class="info-text">{{ userInfo.phone }}</span>
        <el-input v-else v-model="userInfo.phone" size="small" placeholder="请填写手机号" @blur="handleSaveInfo('phone')" />
        <i class="el-icon-edit" @click="phoneEdit = !phoneEdit"></i>
      </div>
      <div class="info">
        <span class="info-title">邮箱：</span>
        <span v-if="!emailEdit" class="info-text">{{ userInfo.email || '-' }}</span>
        <el-input v-else v-model="userInfo.email" size="small" placeholder="请填写邮箱" @blur="handleSaveInfo('email')" />
        <i class="el-icon-edit" @click="emailEdit = !emailEdit"></i>
      </div>
      <div class="info">
        <span class="info-title">当前角色：</span>
        <span class="info-text">{{ typeOptions[userInfo.type] }}</span>
        <el-button type="text" size='small' v-if="userInfo.type === '0'">立即认证</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { modifyUserInfo } from "@/api/login";
import { phoneValidate, emailValidate } from "@/utils/utils"
export default {
  name: "Upload",
  data() {
    return {
      imageUrl: "",
      userInfo: {},
      phoneEdit: false,
      emailEdit: false,
      typeOptions: {
        '0': '普通用户',
        '1': '企业交易商',
        '2': '个人交易商'
      },
    };
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    phoneValidate,
    emailValidate,
    handleAvatarSuccess() {
      console.log("成功");
    },
    getUserInfo() {
      this.$store.dispatch('getInfo').then((res) => {
        if (res.code === 200) {
          this.userInfo = res.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    async handleSaveInfo (prop) {
      if (!this[prop+'Validate'](this.userInfo[prop])) {
        this.message.warning('请输入正确格式')
        return
      }
      const params = {
        id: this.userInfo.id,
        [prop]: this.userInfo[prop]
      }
      const res = await modifyUserInfo(params).finally(() => {
        this[prop+'Edit'] = false
        this.getUserInfo()
      })
      if (res.code === 200) {
        this.message.success('保存成功')
      }
    }
  },
};
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.img-upload {
  margin-top: 10px;
  border-top: 2px solid #ccc;
  padding-top: 20px;
  display: flex;
  .add {
    display: flex;
    flex-direction: column;
    align-items: center;

    .addImg {
      margin-top: 10px;
    }
  }
  .tip {
    margin-left: 30px;
    color: $blackColor;
    p {
      margin-top: 25px;
    }
  }
}
.info-box {
  margin-top: 10px;
  border-top: 2px solid #ccc;
  padding-top: 20px;
  .info{
    display: flex;
    align-items: center;
    margin-top: 15px;
    width: 100%;
    color: #8c939d;
    font-size: 16px;
    line-height: 32px;
    .info-title{
      display: inline-block;
      width: 13%;
    }
    i{
      cursor: pointer;
      margin-left: 5px;
    }
    .info-text{
      display: inline-block;
      width: 23%;
    }
  }
}
.two {
  display: block;
  margin-top: 30px;
}
::v-deep .el-input {
  width: 23%;
}
</style>